REACT.JS

Links: https://reactjs.org/ and https://github.com/facebook/react

Introduction .

Hello everyone. My name is Irina. In this presentation, we’ll look at a cool Java Script library called

React. We’ll get acquainted with its basics, find out what are the pros and cons. Here goes!

 React is a JavaScript library for building user interfaces.

 Renders your UI and responds to events

 It also uses the concept called Virtual DOM, creates an in-memory data structure cache, enumerates the

resulting differences, and then updates the browser’s displayed DOM efficiently.

 One of the unique features of React.js is not only it can perform on the client side, but it can also be rendered

on the server side, and they can work together interoperable

 UI

WHY WAS REACT DEVELOPED?

 Complexity of two-way data binding.

 Bad UX from using "cascading updates" of DOM tree

 A lot of data on a page changing over time

 Complexity of Facebook's UI architecture

react is maintained by

GitHub stats:

WEBSITES USING REACT

Websites worldwide made with react

WHY SHOULD YOU USE REACT?

 To read and understand views

 Concept of components is the future of web development

 If your page uses a lot of fast updating data or real time data - React is the way to go

 Once you and your team is over the React's learning curve, developing your app will become a lot

faster

REACT: THE GOOD

EASY TO UNDERSTAND WHAT A COMPONENT WILL RENDER

 Code → predictable code

 You don't really need to study JS in the view file in order to understand what the file does

EASY TO MIX HTML AND JS

 You do it already with template libraries (e.g. Handlebars, Mustache, Underscore etc.)

NO COMPLEX TWO-WAY DATA FLOW

 Uses simple one-way reactive data flow

 Easier to understand than two-way binding

 Uses less code

REACT IS FAST!

 Real DOM is slow

 JavaScript is fast

 Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains

over frequent cascading updates of DOM tree

REACT: THE "BAD"t that React is w.

You DON'T GET any of the following:

 Event system (other than vanilla DOM events)

 Any AJAX capabilities whatsoever

 Any form of a data layer

 Promises

 Any application framework

BUILDING JSX REQUIRES SOME EXTRA WORK

 But most of the work is already done for you by react-tools

NO SUPPORT FOR OLDER BROWSERS

 React won't work with IE8

 There some polyfills / shims that help

TRY REACT:

ONLINE PLAYGROUNDS:

CodePen, CodeSandbox

USE WEBPACK OR CREATE REACT APP:

Webpack 4, Create React App

FUNDAMENTALS

Most important terms in React

COMPONENT

Components are self-contained reusable building blocks of web application. React components are

basically just idempotent functions (same input produces same output). They describe your UI at any

point in time, just like a server-rendered app.

COMPONENT

The simplest way to define a component is to write a JavaScript function:

You can also use an ES6 class to define a component:

PROPS

 Passed down to component from parent component and represents data for the component

 accessed via this.props

STATE

 Represents internal state of the component

 Accessed via this.state

 When a component's state data changes, the rendered markup will be updated by re-invoking

render() method

JSX

 Arguably, one of the coolest things in React

 Easier to read and understand large DOM trees

 Translates to plain JavaScript using react-tools

 XML-like syntax for generating component's HTML

VIRTUAL DOM

 The virtual DOM is used for efficient re-rendering of the DOM

 React aims to re-render the virtual tree only when the state changes

 Uses 2 virtual trees (new and previous) to find differences and batch update real DOM

 Observes data changes (setState) and does dirty-checking to know when to re-render component

 Whenever possible, does not update entire component in real DOM - only computes a patch

operation that updates part of the DOM

LIFECYCLE REACT APPLICATION

More information

Description: ReactJS provides a bunch of methods that are executed during different stages of components life. Those

are called lifecycle methods. Lifecycle methods are only available for class based components. For functional

components react provides hooks. Let’s go through this diagram.

Horizontally it is split into three main stages:

 Mounting

 Updating

 Unmounting

Mounting

This is first stage each component goes through. During this stage component gets created and then mounted to the DOM.

First method that is being executed during this stage is constructor.

Updating

Next big stage is is updating. Methods of this stage get called every time props or state of the component get changed

or forceUpdate() gets called.

Unmounting

Last stage is unmounting and it has only one method - componentWillUnmount.This method is being called right before the

component is being removed from the DOM.It is a good place to perfom the cleanup and remove your event listeners or

timers that you might have added in componentDidMount.

Thanks for attention